<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>基本使用</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<app></app>
		</div>

	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		const student = Vue.extend({
			template: `
				<div>
					<h1>学生姓名：{{username}}</h1>
					<h1>学生年龄：{{age}}</h1>
				</div>
			`,
			data(){
				return {
					username : '纪宽豪',
					age : 27
				};
			}
		});

		const school = Vue.extend({
			template: `
				<div>
					<h1>学校姓名：{{schoolname}}</h1>
					<h1>学校地址：{{addr}}</h1>
					<button @click="updateSchool">点我切换地址</button>

					<hr/>

					<student></student>
				</div>
			`,
			data(){
				return {
					schoolname : '金陵科技学院',
					addr : '南京'
				};
			},
			methods: {
				updateSchool() {
					this.schoolname = '南京晓庄学院';
				},
			},
			components:{
				student,
			}
		});

		const hello = Vue.extend({
			template: `
				<div>
					<h1>妹子名称：{{username}}</h1>
					<h1>妹子年龄：{{age}}</h1>
				</div>
			`,
			data(){
				return {
					username : '王欣悦',
					age : 25
				};
			}
		});

		//定义app组件
		const app = Vue.extend({
			template:`
				<div>	
					<hello></hello>
					<school></school>
				</div>
			`,
			components:{
				school,
				hello
			}
		})

		// 绑定
		new Vue({
			el : '#root',
			
			//第二步：注册组件（局部注册）
			components:{
				app,
			}
		});



	</script>
</html>